<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>file input example</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.min.css" crossorigin="anonymous">
    <link href="bootstrap-fileinput-5.5.1/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">
    <link href="bootstrap-fileinput-5.5.1/themes/explorer-fa5/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="bootstrap-fileinput-5.5.1/js/plugins/buffer.min.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/js/plugins/filetype.min.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/js/plugins/piexif.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/js/fileinput.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/js/locales/fr.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/js/locales/es.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/themes/gly/theme.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/themes/fa5/theme.js" type="text/javascript"></script>
    <script src="bootstrap-fileinput-5.5.1/themes/explorer-fa5/theme.js" type="text/javascript"></script>


</head>
<body>
<div class="container">
    <div class="file-loading">
        <input type="file" id="file-upload-input" name="file-upload-input" accept="image/*" multiple />
    </div>
    <div id="kv-error-2" style="margin-top:10px;display:none"></div>
    <script>
        $("#file-upload-input").fileinput({
            language: "zh",//配置语言
            uploadUrl: "/api/file/upload",
            uploadExtraData: {
                'userId': 'dengpeng',
                'appId':'fileupdate-example',
                'thumbnail': '50*50,100*100'
            },
            uploadAsync: false,
            //showPreview: false,
            showRemove: false, //是否显示删除按钮
            //allowedFileExtensions: ['xlsx', 'xls'],
            elErrorContainer: '#kv-error-2'
        }).on('filebatchuploadsuccess', function (event, data) {
            console.log(data);
        });
    </script>
</div>
</body>
</html>